<template>
	<div>

		<div class="addAdmin1">
			<h3><i class="el-icon-s-custom"></i>用户添加</h3>
			<div class="addAdmin2"></div>
		</div>
		<div>
			<div class="addImg">
				<img :src="`${$ip}/api/public/showimg/${img}`" style="	width: 400px;
			height: 350px;
			position: relative;
			left: -300px;
			top: 50px;" min-width="70" height="70" />
				<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
					:before-upload="beforeAvatarUpload" :file-list="fileList" :on-change="handleChange"
					action="uploadAction" list-type="picture" accept="image/jpg,image/jpeg">
					<h4>选择头像图片</h4>
				</el-upload>
			</div>
		</div>
		<div class="addform">
			<el-form ref="form" label-width="80px">
				<el-form-item label="账号">
					<el-input v-model="account"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="pwd"></el-input>
				</el-form-item>
				<el-form-item label="密码确认">
					<el-input v-model="pwd2"></el-input>
				</el-form-item>
				<el-form-item label="姓名昵称">
					<el-input v-model="name"></el-input>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="phone"></el-input>
				</el-form-item>
				<el-form-item label="客户类型">
					<el-select v-model="vips">
						<el-option label="买家" value="0"></el-option>
						<el-option label="超级买家" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="收货地址">
					<el-input type="textarea" v-model="home"></el-input>
				</el-form-item>
			</el-form>
			<el-button style="margin-left: 50%;border: none;" @click="add()">注册</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'addAdmin',
		data() {
			return {
				img: '',
				fileList: [],
				account: '',
				pwd: '',
				pwd2: '',
				name: '',
				phone: '',
				vips: '',
				home: '',

				user: {}
			}
		},
		methods: {
			handleChange: function(file, fileList) {
				this.fileList = fileList;
			},

			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 512;

				if (!isJPG) {
					this.$message.error('上传图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 0.5MB!');
				}
				return isJPG && isLt2M;
			},
			add() {
				let formData = new FormData();
				formData.append("nickname", this.name);
				formData.append("mypic", this.fileList[0].raw);
				formData.append("account", this.account);
				formData.append("password", this.pwd);
				formData.append("phone", this.phone);
				formData.append("vip", this.vips);
				formData.append("addr", this.home);
				this.$postf("/api/public/addUser", formData).then((resp) => {
					console.log(resp.data.data);
					if (resp.data.data.id > 0) {
						this.$message({
							showClose: true,
							message: '注册成功'
						});
						this.$route.push('/home');
					}
				})

			}
		}
	}
</script>

<style>
	.addAdmin1 {
		width: 63%;
		margin: 0 auto;
		text-align: center;
		margin-top: 2%;
	}

	.addAdmin2 {
		width: 100%;
		height: 1px;
		background-color: skyblue;
		margin-top: 1%;
	}

	.addImg {
		width: 30%;
		margin: 0 auto;
		margin-top: 2%;
	}

	.addImg h4 {
		position: relative;
		top: 50px;
		left: -350px;
	}

	.addform {
		width: 30%;
		position: relative;
		left: 50%;
		top: -380px;
	}

	.el-upload-list--picture .el-upload-list__item {
		position: relative;
		left: -355px;
		top: 50px;
	}
</style>